<template>
  <el-card>
    <el-divider><h3>班级每日所学</h3></el-divider>
    <el-form :inline="true">
      <el-form-item label="管理班级过滤：">
        <el-select v-model="targetClassId">
          <el-option
              v-for="classGrade in classList"
              :key="classGrade.id"
              :label="classGrade.name"
              :value="classGrade.id"
          />
        </el-select>
      </el-form-item>
      <el-button type="primary" @click="toAddCourse">添加每日所学</el-button>
    </el-form>
    <el-table
        border
        :data="courseList"
        style="width: 100%;margin-top: 30px;">
      <el-table-column
          label="编号"
          prop="id">
      </el-table-column>
      <el-table-column
          label="班级"
          prop="classGrade.name">
      </el-table-column>
      <el-table-column
          label="日期"
          prop="date">
      </el-table-column>
      <el-table-column
          label="内容"
          prop="content">
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button>修改</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <!--添加课程dialog-->
  <add-course-dialog :visible="courseAddDialogVisible" :classGradeId="targetClassId" @on-cancel="cancel" @on-confirm="confirm"/>
</template>

<script>
export default {
  name: "CourseManage",
  components: {
    'add-course-dialog': loadVue('/views/manage-for-teacher/views/CourseManage/components/AddCourseDialog.vue'),
  },
  data(){
    return {
      // 班级列表
      classList:[],
      // 目标班级id（正在查询）
      targetClassId:null,
      // 课程列表
      courseList:[],
      courseAddDialogVisible:false
    };
  },
  mounted(){
    // 查询所有班级并指定默认班级
    this.fetchClassData();
  },
  watch: {
    /**
     * 监听属性变化
     */
    targetClassId(newValue) {
      console.log("切换class:",newValue);
      this.targetClassId = newValue;
      this.listCourses(newValue);
    }
  },
  methods:{
    // 查询班级数据
    fetchClassData(){
      axios.get('/getCurrentTeacherClass').then(response => {
        if (response.data.success) {
          this.classList = response.data.data;
          this.targetClassId = this.classList[0].id;
          this.listCourses(this.targetClassId);
        } else {
          this.$notify.error({
            title: '查询教师管理班级失败',
            message: response.data.msg
          });
        }
      });
    },
    // 查询某班级的课程
    listCourses(classId){
      axios.get(`/courseManage/listCourse/${classId}`).then(response=>{
        if (response.data.success) {
          this.courseList = response.data.data;
        } else {
          this.$notify.error({
            title: '查询课程列表失败',
            message: response.data.msg
          });
        }
      });
    },
    /**
     * 去添加课程
     */
    toAddCourse(){
      this.courseAddDialogVisible = true;
    },
    /**
     * 取消回调
     */
    cancel() {
      this.courseAddDialogVisible = false;
    },
    /**
     * 确认回调
     */
    confirm() {
      this.courseAddDialogVisible = false;
      this.fetchClassData();
    },
  }
}
</script>

<style scoped>

</style>